<div {{#if id}} id="{{id}}" {{/if~}}
  class="row g-3 h-100
  {{~#if columns}} row-cols-1 row-cols-sm-2 row-cols-lg-{{columns~}} {{/if~}}
  {{~#if class}} {{class}} {{/if}}
">
{{#each_row}}
  <div class="col {{~#if class}} {{class}}{{/if}}"
  {{#unless ../columns}}style="min-width: 9rem;"{{/unless}}
  {{~#if id}} id="{{id}}"{{/if~}}
  >
    <div class="card flex-fill {{#if color}}bg-{{color}}-lt{{/if}}">
      <div class="card-body d-flex flex-column">
        
        {{#if title}}
        <div class="d-flex align-items-center">
          <div class="subheader text-truncate me-2">
            {{#if title_link}}
              <a href="{{title_link}}" class="text-decoration-none"
                 {{#if title_link_new_tab}}
                   target="_blank" rel="noopener noreferrer"
                 {{/if}}
              >
                {{title}}
              </a>
            {{else}}
              {{title}}
            {{/if}}
          </div>

          {{#if dropdown_item}}
          <div class="ms-auto lh-1">
            <div class="dropdown">
              <a class="dropdown-toggle text-secondary" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{dropdown_item.[0].label}}</a>
              <div class="dropdown-menu dropdown-menu-end">
                {{#each dropdown_item}}
                {{#if link}}
                <a class="dropdown-item {{#if active}}active{{/if}}" href="{{link}}">{{label}}</a>
                {{else}}
                <span class="dropdown-item {{#if active}}active{{/if}}">{{label}}</span>
                {{/if}}
                {{/each}}
              </div>
            </div>
          </div>
          {{/if}}
        </div>
        {{/if}}
        
        <div class="d-flex align-items-center mt-1">
          <div class="h1 {{#if description}}mb-3{{else}}mb-0{{/if}} mt-auto text-nowrap text-truncate">
            {{#if value_link}}
              <a href="{{value_link}}"
                 class="text-decoration-none"
                 {{#if value_link_new_tab}} target="_blank" rel="noopener noreferrer"
               {{/if}}
               >
                {{value}}{{#if unit}} {{unit}}{{/if}}
              </a>
            {{else}}
              {{value}}{{#if unit}} {{unit}}{{/if}}
            {{/if}}
          </div>

          {{#if (and change_percent (not description))}}
          <div class="ms-auto">
            {{#if change_percent}}
            <span class="text-{{#if (gte change_percent 0)}}success{{else}}danger{{/if}} d-inline-flex align-items-center lh-1">
              {{change_percent}}%
              {{#if (gte change_percent 0)}}
                  {{~icon_img 'trending-up'~}}
              {{else}}
                  {{~icon_img 'trending-down'~}}
              {{/if}}
            </span>
            {{/if}}
          </div>
          {{/if}}
        </div>
        
        {{#if description}}
        <div class="d-flex flex-wrap mb-2" title="{{description}}">
          <div class="text-truncate me-2">{{description}}</div>
          {{#if change_percent}}
          <div class="ms-auto">
            <span class="text-{{#if (gte change_percent 0)}}success{{else}}danger{{/if}} d-inline-flex align-items-center lh-1">
              {{change_percent}}%
              {{#if (gte change_percent 0)}}
                  {{~icon_img 'trending-up'~}}
              {{else}}
                  {{~icon_img 'trending-down'~}}
              {{/if}}
            </span>
          </div>
          {{/if}}
        </div>
        {{/if}}

        {{#if progress_percent}}
        <div class="progress progress-sm">
          <div class="progress-bar bg-{{progress_color}}" style="width: {{progress_percent}}%" role="progressbar" aria-valuenow="{{progress_percent}}" aria-valuemin="0" aria-valuemax="100" aria-label="{{progress_percent}}% Complete">
            <span class="visually-hidden">{{progress_percent}}% Complete</span>
          </div>
        </div>
        {{/if}}
      </div>
    </div>
  </div>
{{/each_row}}
</div>
